<template>
	<div class="pc-detail">
		<div class="layui-qrocde-wrap" style="display: none;">
			<div class="qrcode-inner-wrap" id="layui-qrocde-inner-wrap">
			</div>
			<div class="layui-qrocde-tips">请先微信扫码登陆后评论</div>
		</div>
		<info-header></info-header>
		<div class="pc-detail-wrap" v-if="loadAll">
			<div class="pc-detail-inner-wrap detail-module" :class="{'has-banner':banner}">
				<div class="pc-detail-inner-content main-content">
					<div class="main-content-header-wrap fix">
						<h3 class="main-content-header-title fl unify_title">{{detail.title}}</h3>
						<div class="fix">
							<div class="main-content-header-des fr">
								<div class="main-content-header-avatar fl unify_name">作者 <span class="main-content-header-avatar-name ell">{{detail.username}}</span></div>
								<div class="main-content-header-time fl unify_time"><i class="icon small-time-icon" style="vertical-align: -5px;"></i>{{detail.publish}}</div>
							</div>
							<div class="user-opearte-area fr">
								<a href="javascript:;" class="operate-btn follow-btn active" title="取消关注" v-if="isFollow" @click="cancelFollow"></a>
								<a href="javascript:;" class="operate-btn follow-btn" title="关注" @click="follow" v-else></a>
								<a href="javascript:;" class="operate-btn collect-btn" title="收藏" @click="collect" :class="{'active':isCollect}"></a>
								<a href="javascript:;" class="operate-btn zan-btn" title="点赞" @click="zan" :class="{'active':isGood}"></a>
								<transition name="fade">
									<div class="follow-tips-wrap">
										<follow-dialog v-if="followTips" @hide="followTips = false;" icon-class="follow-icon" operate="关注" operate-tips="已成功关注老师,查看关注内容,请使用浏览器扫码下载app"></follow-dialog>
									</div>
								</transition>
								<transition name="fade">
									<div class="collect-tips-wrap">
										<follow-dialog v-if="collectTips" @hide="collectTips = false;" icon-class="collect-tip-icon" operate="收藏" operate-tips="已经成功收藏此内容，查看已收藏内容，请使用浏览器扫码下载app"></follow-dialog>
									</div>
								</transition>
								<transition name="fade">
									<div class="zan-tips-wrap">
										<follow-dialog v-if="zanTips" @hide="zanTips = false;" icon-class="zan-tip-icon" operate="点赞" operate-tips="谢谢支持，用浏览器扫码下载app我们会为您提供更多相关内容"></follow-dialog>
									</div>
								</transition>
							</div>
						</div>
					</div>
					<div v-if="detail.status == 0">
						<div class="player-box" v-if="detail.type == 2">
							<video-player  class="video-player-pc-box"
						       ref="videoPlayer"
						       :options="playerOptions"
						       :playsinline="true"
						       customEventName="customstatechangedeventname" 			       
						       @play="onPlayerPlay($event)"
				       			@pause="onPlayerPause($event)"
				       			@ended="onPlayerEnded($event)"
				       			@statechanged="playerStateChanged($event)"
				       			@loadeddata="onPlayerLoadeddata($event)"  
				       			@timeupdate="onPlayerTimeupdate($event)"     
				       			@ready="playerReadied">
						    </video-player>
						</div>
						<div class="real-main-content detail-container" v-html="detail.content"></div>
						<div class="copyright">以上文章内容均源自自媒体，版权归原作者所有，转载请联系原作者并获许可。如对文章内容有疑议，请及时与我们联系。</div>
						<div class="sign-item-wrap">
							<div class="sign-item ell" v-for="tag in detail.tag" :title="tag">
								<i class="icon sign-icon"></i>{{tag}}
							</div>
						</div>
					</div>
					<div class="disable-wrap" v-else>
						<p class="disable-browse-p"><img src="../assets/images/disable-browse.png" alt="文章禁止浏览"/></p>
						<p>该文章已经被禁止浏览</p>
					</div>
				</div>
			</div>
			<div class="pc-detail-recommand-list-wrap detail-module">
				<div class="pc-detail-inner-content main-content">
					<div class="recommend-title unify_title">
						推荐
					</div>
					<div class="pc-detail-recommand-list">
						<ul class="pc-detail-recommand-ul" v-if="recommend.length>0">
							<li v-for="item in recommend" :key="item.id" class="pc-detail-recommand-li">
								<a :href="'/'+item.uid" class="recommend-a">
									<img v-lazy="item.cover"  alt="推荐" class="recommend-cover fl"/>
									<div class="pc-detail-recommand-info">
										<div class="pc-detail-recommand-title unify_title">{{item.title}}</div>
										<div class="pc-detail-recommand-time unify_name"><i class="icon time-icon"></i>{{item.created_at}}</div>
										<div class="pc-detail-recommand-sign">
											<div class="sign-item ell" v-for="(item,index) in item.tag" :key="index">
												<i class="icon sign-icon"></i>{{item}}
											</div>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<div class="no-tips" v-else>暂无推荐</div>
					</div>
				</div>
			</div>
			<div class="comment-wrap detail-module">
				<div class="comment-inner-wrap">
					<div class="textarea-wrap">
						<textarea name="comment-content" v-model="content" class="content-textarea" :disabled="detail.allow_comment == 0"></textarea>
						<div class="comment-disable-tips" v-if="detail.allow_comment == 0">文章设置为禁止评论</div>
						<div class="comment-zishu-tips" v-else>
							还可以输入<span>250</span>个字
						</div>
					</div>
					<div class="commit-comment-wrap fix">
						<div class="face-icon-wrap fl" v-show="detail.allow_comment != 0" @click.stop="isShowFace(true)">
							<i class="icon icon-face"></i>
							表情
							<transition name="bounce">
								<keep-alive>
									<face :face-arr="faceAlt" v-if="showFace" :emoji-content.sync="emojiContent" @show-face="isShowFace"></face>
								</keep-alive>
							</transition>	
						</div>
						<div class="comment-btn-wrap fr">
							<a href="javascript:;" class="comment-btn blue-btn" :class="{'disable':detail.allow_comment == 0}" @click="send($event)">评论</a>
						</div>
					</div>
				</div>
			</div>
			<div class="comment-list-wrap detail-module" v-if="commentAll.length">
				<div class="comment-inner-list-wrap">
					<div class="comment-list-item-wrap">
						<div class="comment-list-item" v-for="item in commentAll" :key="item.id">
							<img :src="item.author.avatar" alt="头像" class="comment-list-avatr fl"/>
							<div class="my-comment-wrap">
								<div class="my-comment-inner-wrap">
									<div class="my-comment-author-wrap"><span class="my-comment-author-name">{{item.author.nickname}}</span>说</div>
									<div class="my-comment-create-wrap">{{item.created_at}}</div>
									<div class="my-comment-content-wrap" v-html="item.content">
									</div>
								</div>
							</div>
							<div class="teacher-comment-wrap" v-for="comment in item.comments">
								<div class="teacher-comment-inner-wrap">
									<div class="my-comment-author-wrap"><span class="my-comment-author-name">{{comment.author.nickname}}</span>说</div>
									<div class="my-comment-create-wrap">{{comment.created_at}}</div>
									<div class="my-comment-content-wrap">
										{{comment.content}}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {static_url} from '../utils/const';
	import {faceContent,customLazyLoad} from '../utils/util';
	import InfoHeader from '../components/header/header'
	import face from '../components/face/face'
	import followDialog from '../components/dialog/dialog'
	import mediumZoom from 'medium-zoom'
	import def_lazy_img from '../assets/images/lazy_load.png'
	import {mapState} from 'vuex'
	export default{
		name:"pcDeatil",
		data(){
			return{
				detail:{},
				recommend:[],
				loadAll:false,
				videoClickCount:0,
				playerOptions: {
					fluid: true, 
			        muted: false,
			        language: 'zh-CN',
			        playbackRates: [0.7, 1.0, 1.5, 2.0],
			        sources: [{
			            type: "video/mp4",
			            src:''
			        }],
			        poster: '',
			        notSupportedMessage:'此视频暂无法播放，请稍后再试'
			    },
			    content:'',
			    emojiContent:'',
			    showFace:false,
			    commentAll:[],
			    isGood:false,
			    isCollect:false,
			    isFollow:false,
			    user_id:'',
			    followTips:false,
			    collectTips:false,
			    zanTips:false
			}
		},
		computed:mapState([
        'banner'
    ]),
		beforeRouteUpdate(to,form,next){
			next();
			location.reload();
		},
		created(){
			this.faceAlt = ["[微笑]", "[撇嘴]", "[色]", "[发呆]", "[得意]", "[流泪]", "[害羞]", "[闭嘴]", "[睡]", "[大哭]", "[尴尬]", "[发怒]", "[调皮]", "[呲牙]", "[惊讶]", "[难过]", "[酷]", "[冷汗]", "[抓狂]", "[吐]", "[偷笑]", "[可爱]", "[白眼]", "[傲慢]", "[饥饿]", "[困]", "[惊恐]", "[流汗]", "[憨笑]", "[大兵]", "[奋斗]", "[咒骂]", "[疑问]", "[嘘]", "[晕]", "[折磨]", "[衰]", "[骷髅]", "[敲打]", "[再见]", "[擦汗]", "[抠鼻]", "[鼓掌]", "[糗大了]", "[坏笑]", "[左哼哼]", "[右哼哼]", "[哈欠]", "[鄙视]", "[委屈]", "[快哭了]", "[阴险]", "[亲亲]", "[吓]", "[可怜]", "[菜刀]", "[西瓜]", "[啤酒]", "[篮球]", "[乒乓]", "[咖啡]", "[饭]", "[猪头]", "[玫瑰]", "[凋谢]", "[示爱]", "[爱心]", "[心碎]", "[蛋糕]", "[闪电]", "[炸弹]", "[刀]", "[握手]", "[胜利]", "[便便]", "[NO]", "[OK]", "[抱拳]", "[弱]", "[强]"];
		},
		methods:{
			playerReadied(player) {
	         //console.log('the player is readied', player);
	        },
	        onPlayerLoadeddata(player){
				//console.log('onPlayerLoadeddata', player);
	        },
	        onPlayerTimeupdate(player){  
	          if(this.videoClickCount==0){
	          	 var  currentTime = Math.floor(player.currentTime());
	          	 if(currentTime != 0 && currentTime%10 ==0){ //隔10秒发送一次统计
	          	 	var per = Math.round( Math.floor(player.currentTime()) / Math.floor(player.duration()) *100 );
	          	 	window.statistic_log("percentage="+per);
	          	 }
	          }
	        },
			onPlayerPlay(player) {
	         console.log('player play!')
	         window.statistic_log("played=true");
		    },
		    onPlayerPause(player) {
		       console.log('player pause!')
		    },
		    onPlayerEnded(player) {
		    	if(this.videoClickCount==0){
		    		window.statistic_log("percentage="+100);
		    		this.videoClickCount++;
		    	}
		    },
		    playerStateChanged(playerCurrentState) {
	           console.log('player current update state', playerCurrentState)
	       },
			getDetail(){
				let del_div = layer.load(0,{shade: [0.25, '#000']});
				this.http.get('./post/'+this.$route.params.uuid+'?'+Math.random()).then((res)=> {
				    if(res.data.error == 0){
				    	layer.close(del_div);
				    	this.loadAll = true;
						this.detail = res.data.data;
						this.detail.content = this.detail.content.replace(/<img.*?(?:>|\/>)/gi,function(img){
							var src = img.match(/src=[\'\"]?([^\'\"]*)[\'\"]?/ig);
							if(src){
								return '<img class="lazy" src="'+def_lazy_img+'" data-src="'+src[0].split('"')[1]+'"/>';
							}else{
								return ''
							}
						})
						if(res.data.data.avatar.indexOf('http:')==-1){
							this.detail.avatar = static_url+res.data.data.avatar;
						}else{
							this.detail.avatar = res.data.data.avatar;
						}
						if(this.detail.status == 0){
							document.title = res.data.data.title;
						}else{
							document.title = '该文章已经被禁止浏览';
						}
						$("[name='keywords']").attr("content","文章标题，文章作者， 微观财经，投资者教育，微观，财经新闻，股票，期货，基金，债券，外汇，信托，理财，财经频道，财经网站，财经资讯，财经自媒体");
						$("[name='description']").attr("content",this.detail.desc);
						if(res.data.data.video.indexOf('http:')==-1){
							this.playerOptions.sources[0].src = static_url+res.data.data.video;
						}else{
							this.playerOptions.sources[0].src = res.data.data.video;
						}
						if(res.data.data.cover.indexOf('http:')==-1){
							this.playerOptions.poster = static_url+res.data.data.cover;
						}else{
							this.playerOptions.poster = res.data.data.cover;
						}
						this.detail.tag = res.data.data.tag.split(";");
						this.getRecommend(res.data.data.user_id);
						this.user_id = res.data.data.user_id;
						this.isCollect = res.data.data.favorite;
						this.isFollow = res.data.data.followed;
						this.isGood = res.data.data.liked;
						this.$nextTick(function(){
							customLazyLoad('.detail-container img')
					    mediumZoom('.detail-container img',{
					    	background: 'rgba(0,0,0,.9)',
					    	margin:10
					    });
						})
										    	
					}else{
						layer.msg(res.data.msg, {icon: 5});
					}
				  })
				  .catch((error)=>{
				  	console.log(error);
			    });
			},
			getRecommend(user_id){
				this.http.get('./post/relate/'+this.$route.params.uuid)
				  .then((res)=> {
				    if(res.data.error == 0){
						this.recommend = res.data.data;
						this.recommend.forEach((item,index)=>{
							if(item.cover.indexOf("http") === -1){
								item.cover = static_url + item.cover;
							}
							item.tag = item.tag.split(";");
						});
					}else{
						layer.msg(res.data.msg, {icon: 5});
					}
				  })
				  .catch((error)=>{
				  	 
			    });
			},
			getComment(){
				this.http.get('./post/'+this.$route.params.uuid+'/comments')
				  .then((res)=> {
				    if(res.data.error == 0){
						this.commentAll = res.data.data;
						this.commentAll.forEach((item,index)=>{
							if(item.author.avatar.indexOf("http") === -1){
                item.author.avatar = static_url + "/" +item.author.avatar;
              }
						  item.content = faceContent(item.content);
              item.content = item.content.replace(/</g,'&#60;').replace(/>/g,'&#62;').replace(/\//g,'&#47;');
							item.content = item.content.replace(/&#47;b(\d+)/g,function(all,$1){
								let src = require(`../assets/face/${$1}.png`);
								return "<img width='20' height='20' src='"+src+"'>";
							});	
			        item.comments.forEach((item, index) => {
			          if (item.author.avatar.indexOf("http") === -1) {
			            item.author.avatar = static_url + item.author.avatar;
			          }
			        })
						});
					}else{
						layer.msg(res.data.msg, {icon: 5});
					}
				  })
				  .catch((error)=>{
				  	 
			      });
			},
			isShowFace(flag){
				this.showFace = flag;
			},
			send:function(event){
		        if($(event.target).hasClass('disable')){
					layer.msg('文章设置为禁止评论',{icon: 5});
				   	return false;	
		        }
			    if(this.content.replace(/^\s+|\s+$/g,'') == ''){
			   		layer.msg('评论内容不能为空',{icon: 5});
				    return false;	
			    }
			    if( this.content.length > 250){
			   	    layer.msg('评论内容不能超过250个字符',{icon: 5});
				    return false;	
			    }
			    var del_div = layer.load();
			    var parma_arr = {};
		  	    parma_arr.content = this.content;
			    this.http.post('./post/'+this.$route.params.uuid+'/comment',parma_arr)
				  .then((res)=> {
				  	layer.close(del_div);
				    if(res.data.error == 0){
				    	layer.msg("评论成功!", {icon: 6});
				    	this.getComment();
						this.content = ''; 
			 		    this.showFace = false;
					}else{
						if(res.data.error === 50){
							layer.msg('请点击右上方登录，登录后评论', {icon: 6});	
						}else{
							layer.msg(res.data.msg, {icon: 5});	
						}
					}
				  })
				  .catch((error)=>{
				  	 console.log(error)
			      });
			},
			follow(){
				if(this.isFollow){
		    		layer.msg('已经关注过咯');
		        }else{
			    	this.http.post('follow/' + this.user_id)
					  .then((res)=> {
					    if(res.data.error == 0){
					    	this.isFollow = true;
					    	this.followTips = true;
						}else{
							layer.msg(res.data.msg, {icon:5});
						}
					  })
					  .catch((error)=>{
					  	 
				      });
			    }
			},
			cancelFollow(){
		    	this.http.post('follow/' + this.user_id,{_method:'DELETE'})
				  .then((res)=> {
				    if(res.data.error == 0){
				    	this.isFollow = false;
						layer.msg("取消关注成功!", {icon: 6});
					}else{
						layer.msg(res.data.msg, {icon:5});
					}
				  })
				  .catch((error)=>{
				  	 
			     });
			},
			collect(){
		    	if(this.isCollect){
					layer.msg('已经收藏过咯');
		    	}else{
			    	this.http.post('./post/'+this.$route.params.uuid+'/favorite')
					  .then((res)=> {
					    if(res.data.error == 0){
					    	this.isCollect = true;
					    	this.collectTips = true;
						}else{
							layer.msg(res.data.msg, {icon:5});
						}
					  })
					  .catch((error)=>{
					  	 
				      });
			    }
		    },
		    zan:function(event){
		    	if(this.isGood){
					layer.msg('已经点过赞咯');
		    	}else{
			    	this.http.post('./post/'+this.$route.params.uuid+'/like')
					  .then((res)=> {
					    if(res.data.error == 0){
					    	this.isGood = true;
					    	this.zanTips = true;
						}else{
							layer.msg(res.data.msg, {icon:5});
						}
					  })
					  .catch((error)=>{
					  	 
				      });
			    }
		    }
		},
		watch:{
			emojiContent(val){
				this.content = this.content + val;
				this.emojiContent = '';
			},
			content(newVal){
                if(newVal.length > 250) {
                    newVal= newVal.substring(0, 250);
                }
                this.content = newVal;
                $(".comment-zishu-tips").find("span").text(250 - newVal.length);
            }
		},
		mounted(){
			if(window.statistic_log){
				window.statistic_log("user_id="+this.$store.state.userId);
			}
			this.getDetail();
			this.getComment();
			$("#layui-qrocde-inner-wrap").qrcode({
	        	width:162,
	        	height:162,
	        	text:"https://vend.1234tv.com/app/download"
	      	});
	      	let that = this;
	        document.body.oncopy = function(e){
				event.preventDefault(); 
				let textFont,copyFont = window.getSelection();
		　　　　　　textFont = copyFont + '\n' +
		　　　　　　'作者:'+that.detail.username+'\n' +
		　　　　　　'链接:'+document.location.href+'\n'+
		　　　　　　'来源: 微观财经\n' +
		　　　　　　'以上文章内容均源自自媒体，版权归原作者所有，转载请联系原作者并获许可。如对文章内容有疑议，请及时与我们联系。';
			　　	if (event.clipboardData) {
			　　　　	return event.clipboardData.setData('text', textFont);
			　　	} else {
			　　		return window.clipboardData.setData('text', textFont);  //兼容IE
			　　	}
			}
		},
		components:{
			InfoHeader,
			face,
			followDialog
		}
		
	}
</script>

<style scoped>
	.bounce-enter-active {
	  animation: bounce-in .5s;
	}
	.bounce-leave-active {
	  animation: bounce-in .5s reverse;
	}
	@keyframes bounce-in {
          0% {
               opacity: 0;
               transform: scale(.3);
            }
            50% {
               opacity: 1; 
               transform: scale(1.05);
            }
            70% {
               transform: scale(1.08);
            }
            100% {
               transform: scale(1);
            }
	}
	.pc-detail-wrap{background-color: #f9f9f9;min-height: 100vh;}
	.detail-module{width: 800px;margin:0 auto;padding:20px 0;}
	.detail-module.has-banner{padding: 76px 0 20px 0;}
	.pc-detail-inner-content{ background-color: #fff;}
	.main-content{padding: 30px;}.pc-detail-recommand-list-wrap .main-content{padding: 15px 30px;}
	.main-content-header-time{font-family: "Source Han Sans CN";font-size: 14px;color: rgb(153,153,153);}
	.main-content-header-avatar{color: rgb(128,146,161);}
	.main-content-header-des{margin: 10px 0 0 50px;line-height: 20px;}
	.main-content-header-time{margin: 0 0 0 35px;}
	.main-content-header-wrap{padding-bottom: 20px;border-bottom: 1px solid #dadada;}
	.real-main-content{margin:10px 0;font-family:'微软雅黑';}
	.sign-item-wrap{text-align: right;}
	.main-content-header-avatar-name{display: inline-block;max-width:150px;vertical-align: top;}
	.real-main-content >>> img{max-width: 90%; margin: 20px auto;}
	.recommend-a{display: block;}
	.recommend-a,.pc-detail-recommand-info{overflow: hidden;}
	.recommend-cover{width: 249px;height: 149px;margin-right: 25px;}
	.pc-detail-recommand-info{margin-top: 10px;}
	.pc-detail-recommand-time{margin: 15px 0;}
	.pc-detail-recommand-sign .sign-item{margin-top: 5px;}
	.pc-detail-recommand-li{margin-top: 20px;}
	.pc-detail-recommand-title{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
	.video-player-pc-box{max-width: 90%;margin:30px auto;}
	.player-box >>> .vjs-big-play-button{width: 50px;height: 50px;top:50%;left:50%;margin:auto;background: url(../assets/images/video-paly.png) no-repeat;background-size: contain;border: 0 none;background-color:transparent ;}
	.player-box >>> .vjs-big-play-button .vjs-icon-placeholder:before{content:'' !important;}
	.disable-wrap{padding:150px 0 ;text-align: center;font-family: "microsoft yahei";font-size: 28px;color: rgb(51,51,51);}
	.disable-browse-p{margin-bottom: 30px;}
	.comment-inner-wrap,.comment-inner-list-wrap{margin: auto;}
	.textarea-wrap{position:relative;height: 135px;}
	.textarea-wrap textarea{width: 100%;height: 100%;padding: 20px;border: 1px solid #dadada;font-size: 16px;font-family: "microsoft yahei";}
	.icon-face{display: inline-block;width:22px;height: 22px;margin-top:8px;background: url(../assets/images/face.png) no-repeat;background-size: contain;vertical-align: 3px;}
	.face-icon-wrap{position:relative;font-size: 14px; font-family: simsun;color: #5baae3;cursor: pointer;}
	.face-icon-wrap >>> .face-wrap{position: absolute;left: 0;top:-294px}
	.commit-comment-wrap{margin-top: 15px;}
	.comment-btn{display: inline-block;width: 98px;line-height: 38px;text-align:center;color: #fff;}
	.comment-btn.disable{background-color: #dadada;border: 0 none;cursor: not-allowed;}
	.comment-disable-tips{position:absolute;top:20px;left:20px;font-size: 14px;color: rgb(153,153,153);}
	.comment-list-item{margin-bottom:15px;overflow: hidden;font-family: "microsoft yahei";font-size: 14px;color: rgb(51,51,51);}
	.my-comment-wrap,.teacher-comment-wrap{display: inline-block;vertical-align: top;width:745px;}
	.comment-list-avatr{width: 42px;height: 42px;margin-right: 13px;box-sizing: border-box;border-radius: 50%;border: 1px solid #e4e9ed;}
	.my-comment-inner-wrap,.teacher-comment-inner-wrap{position:relative;padding: 10px;border:1px solid #e4e9ed;}
	.my-comment-inner-wrap:before,.teacher-comment-inner-wrap:before,.my-comment-inner-wrap:after,.teacher-comment-inner-wrap:after{position: absolute;content: '';width: 0;height: 0;}
	.my-comment-inner-wrap:before{border: 6px solid transparent;border-right-color: white;left: -12px;z-index: 1;}
	.my-comment-inner-wrap:after{border: 8px solid transparent;border-right-color: #e4e9ed;top:8px;left: -16px;}
	.my-comment-author-name{margin-right:5px;color: rgb(2,22,124);font-weight: bold;}
	.my-comment-create-wrap{font-size: 12px;color: rgb(177,183,189);}
	.teacher-comment-wrap{margin:15px 0 0 55px;background-color: #f8f8f8;}
	.teacher-comment-wrap .my-comment-author-name{color: rgb(102,102,102);}
	.teacher-comment-inner-wrap:before{border: 6px solid transparent;border-bottom-color: #f8f8f8;top: -12px;left: 12px;z-index: 1;}
	.teacher-comment-inner-wrap:after{border: 8px solid transparent;border-bottom-color: #e4e9ed;top:-16px}
	.my-comment-content-wrap{margin-top: 5px;}
	.comment-zishu-tips{position: absolute;right: 15px;bottom: 8px;font-size: 14px;color: rgb(153,153,153);}
	.comment-zishu-tips span{color: #f39c12;}
	.user-opearte-area{position:relative;margin: 10px 0 0 30px;font-size: 0;}
	.operate-btn{display: inline-block;width: 58px;height: 24px;vertical-align: top;margin-right: 10px;}
	.follow-btn{background:url(../assets/images/follow.png);background-size: contain;}
	.follow-btn.active{background:url(../assets/images/follow-active.png);background-size: contain;}
	.collect-btn{background:url(../assets/images/pc-collect.png);background-size: contain;}
	.collect-btn.active{background:url(../assets/images/pc-collect-active.png);background-size: contain;}
	.zan-btn{background:url(../assets/images/good.png);background-size: contain;margin-right: 0px;}
	.zan-btn.active{background:url(../assets/images/good-active.png);background-size: contain;}
	.fade-enter-active, .fade-leave-active {transition: opacity .5s;}
	.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0;}
	.follow-tips-wrap,.collect-tips-wrap,.zan-tips-wrap{position: absolute;top: 100px;right: 20px;z-index: 1;}
  .detail-container{line-height: 1.8;color:#444;}
  .detail-container >>> img{ max-width:100%; display:block;height:auto;margin: 7px auto;cursor: zoom-in;}
  .detail-container >>> img.lazy{width: 100%;height: 300px;}
	.detail-container >>> a{color: #1478F0;}
	.detail-container >>> a:hover{text-decoration: underline;}
	.detail-container >>> p{line-height:1.8;}
	.detail-container >>> h2{border-left: 4px solid;padding-left: 8px;line-height: 1.2;font-size: 20px;margin:10px 0;}
	.detail-container >>> h3{font-size: 18px;font-weight: 600;margin:10px 0;line-height: 1.6;padding-bottom: 5px;border-bottom: 1px solid #e9e9e9;}
	.detail-container >>> blockquote{background-color: #fafafa;border: 1px solid #eee;border-left-width: 8px;padding: 10px 20px;color: #333;margin-bottom: 20px;}
	.detail-container >>> table{ word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }
	.detail-container >>> .img-label{text-align:center !important;margin-bottom:5px;}
  .detail-container >>> .editor-center{text-align:center}
  .detail-container >>> .editor-left{text-align:left}
  .detail-container >>> .editor-right{text-align:right}
  .detail-container >>> .editor-justify{text-align:justify}
  .copyright{margin:10px 0;font:12px/1.6 "微软雅黑";color:#c8c8c8;}
  .layui-qrocde-wrap{text-align: center;margin-top: 30px;}
  .layui-qrocde-wrap .layui-qrocde-tips{margin-top: 15px;}
</style>